<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <p>count + 10的值： {{ count + 10 }}</p>
    <button @click="fn1" class="btn btn-primary">+1</button>
    <button @click="fn2" class="btn btn-primary">+10</button>
    <button @click="fn3" class="btn btn-primary">调用actions</button>
  </div>
</template>

<script>
// vuex也想到了如果你简化state的访问，有10个就要自己写10个计算属性，极其麻烦
// 所以它提供了一个辅助函数，可以帮你快速的生成计算属性
import { mapState } from 'vuex'

// 以下注释是研究的原理
// const obj = {
//     count () {
//       return this.$store.state.count
//     },
//     xx () {
//       return this.$store.state.xx
//     }
// }

// console.log( mapState(['count', 'xx']) )
export default {
  name: 'Left',
  // 计算属性
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    // xx () {
    //   return this.$store.state.xx
    // }
    // 把vuex里的count和xx自动变成像上面的计算属性一样
    // 也就是说下面这一句话相当于生成了上面的那两段话
    ...mapState(['count', 'xx'])
  },
  methods: {
    fn1 () {
      // 访问vuex里的数据 - 虽然你看起来这样子可以改，但是不推荐这么改！！
      // this.$store.state.count += 5

      // 原因1：开发者工具无法侦测到这个数据的变化，不利于调试
      // 原因2：vue官方也不推荐你这样直接改，如果你开启严格模式，那么你这么改会报错
      this.$store.commit('countPlusPlus')
    },

    fn2 () {
      this.$store.commit('addCount', 10)
    },

    fn3 () {
      this.$store.dispatch('updateCount',999)
    }
  }
}
</script>

<style>
</style>
